<template>
	<view class="cate-rdata">
		<navigator :url="`/pages/detail/index?id=${data.topic_id}&title=${data.title}`">
			<image :src="data.banner_img" :style="{width: `${windowWidth * .2}px`, height: `${windowWidth * .2}px`}" />
		</navigator>
		<view class="cate-rinfo">
			<navigator :url="`/pages/detail/index?id=${data.topic_id}&title=${data.title}`">
				<text class="cate-rtitle">
					<!-- #ifdef MP-TOUTIAO -->
					<text class="item-text-tip">【仅供娱乐】</text>
					<!-- #endif -->
					{{data.title}}
				</text>
			</navigator>
			<view class="cate-rdesc">
				{{data.description}}
			</view>
			<view class="cate-rfooter">
				<view class="cate-rnum">{{data.game_count}}人已测</view>
				<navigator :url="`/pages/detail/index?id=${data.topic_id}&title=${data.title}`">
					<text class="cate-rbtn">立即测试</text>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: [
			'data',
			'windowWidth'
		]
	}
</script>

<style lang="scss" scoped>
.cate-rdata {
	display: flex;
	padding: 20rpx 30rpx 0;
	.cate-rinfo {
		flex: 1;
		margin-left: 20rpx;
		padding-bottom: 20rpx;
		border-bottom: 1px solid #eee;
		min-width: 1px;
		image {
			border: 4rpx;
		}
		.cate-rtitle {
			font-size: 28rpx;
			display: block;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
			.item-text-tip{
				font-size: 24rpx;
			}
		}
		.cate-rdesc {
			display: block;
			font-size: 24rpx;
			color: #aaa;
			line-height: 36rpx;
			height: 36rpx;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
			padding: 10rpx 0;
			margin-bottom: 10rpx;
		}
		.cate-rfooter {
			display: flex;
			align-items: center;
		}
		.cate-rnum {
			flex: 1;
			font-size: 24rpx;
			color: #999;
		}
		.cate-rbtn {
			display: block;
			background-color: #5B78FF;;
			color: #fff;
			font-size: 26rpx;
			padding: 6rpx 20rpx;
			border-radius: 40rpx;
		}
	}
}
</style>
